<style lang="less">
@import '../../../styles/common.less';
</style>

<template>
    <Card>
        <Card>
            <header>
                <span>日期：</span>
                <DatePicker type="date" style="width: 150px" v-model="paymentCompanyCondition.beginTime" name="withholdingApplyBeginTime"></DatePicker>
                <span>至</span>
                <DatePicker type="date" style="width: 150px" v-model="paymentCompanyCondition.endTime" name="withholdingApplyEndTime"></DatePicker>
                <span>对账渠道：</span>
                <Select v-model="paymentCompanyCondition.accountChannel" style="width:150px" name="productType">
                    <Option v-for="item in accountChannelList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
                <span>对账结果：</span>
                <Select v-model="paymentCompanyCondition.accountResult" style="width:150px" name="productType">
                    <Option v-for="item in accountResultList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
                <span>执行状态：</span>
                <Select v-model="paymentCompanyCondition.excuteStatus" style="width:150px" name="productType">
                    <Option v-for="item in excuteStatusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
                <Button type="primary" @click="listQuery">查询</Button>
                <Button type="primary" @click="uploadAccount">上传对账文件</Button>
                <Button type="primary" @click="excuteAccount">执行对账</Button>
            </header>
        </Card>
        <Card>
            <Row type="flex" justify="center" align="middle" class="list-query">
                <Table :columns="orderColumns" :data="orderData" style="width: 100%;" border ref="selection" @on-selection-change="handleRowChange"></Table>
            </Row>
            <div style="margin-top: 36px;text-align: center;">
                <Page :total="paymentCompanyCondition.total" :current="paymentCompanyCondition.pageNum" :page-size="paymentCompanyCondition.pageSize" size="small" show-elevator show-sizer show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
            </div>
            </br>
            </br>
            <Table :columns="statisticsColumns" :data="statisticsData" style="width: 100%;"></Table>
        </Card>
        <Modal v-model="modal1" title="上传条件设置" @on-ok="ok" @on-cancel="cancel" :scrollable="true">
            <Form ref="downForm" :model="uploadCondition" :rules="rules" action="" method="get" name="exportSummary" id="exportSummary" enctype="multipart/form-data" inline style="margin-left:13%">
                <FormItem label="选择文件:"></FormItem>
                <FormItem>
                    <Upload ref="upload" :on-success="uploadSuccess" :on-error="uploadFail" :action="uploadUrl" :show-upload-list="true" name="file">
                        <Button type="primary">文件导入</Button>
                    </Upload>
                </FormItem>
                </br>
                <FormItem label="对账时间:"></FormItem>
                <FormItem prop="beginTime">
                    <DatePicker type="date" style="width: 150px" v-model="uploadCondition.beginTime" name="withholdingEndTime"></DatePicker>
                </FormItem>
                <FormItem label="至"></FormItem>
                <FormItem prop="endTime">
                    <DatePicker type="date" style="width: 150px" v-model="uploadCondition.endTime" name="withholdingEndTime"></DatePicker>
                </FormItem>
                </br>
                <FormItem label="对账渠道:"></FormItem>
                <FormItem prop="accountChannel">
                    <Select v-model="uploadCondition.accountChannel" style="width:150px" name="productType">
                        <Option v-for="item in uploadChannelList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
            </Form>
        </Modal>
    </Card>
</template>
<script>
const validateWithholdingBeginTime = (rule, value, callback) => {
  if (value == null || value === '') {
    callback(new Error('请输入代扣开始日期'))
  } else {
    callback()
  }
}
const validateWithholdingEndTime = (rule, value, callback) => {
  if (value == null || value === '') {
    callback(new Error('请输入代扣结束日期'))
  } else {
    callback()
  }
}
export default {
  name: 'mutative-router',
  data () {
    return {
      modal1: false,
      serialNumber: '',
      uploadCondition: {
        beginTime: '',
        endTime: '',
        accountChannel: '',
        filePath: ''
      },
      uploadUrl: this.$appContext.marvels_core_financial + 'financial/loan/paymentReconciliy/service/listQuery/uploadReconciliyFile',
      paymentCompanyCondition: {
        beginTime: '',
        endTime: '',
        accountChannel: '',
        accountResult: '',
        excuteStatus: '',
        pageNum: 1,
        pageSize: 10,
        total: 0,
        batchId: '',
        id: ''
      },
      uploadChannelList: [
        {
          value: '',
          label: '请选择'
        },
        {
          value: '2',
          label: '宝付(口袋)'
        },
        {
          value: '4',
          label: '支付宝'
        }

      ],
      accountChannelList: [
        {
          value: '',
          label: '请选择'
        },
        {
          value: '0',
          label: '快付通(云科贷)'
        },
        {
          value: '1',
          label: '宝付(云科贷)'
        },
        {
          value: '2',
          label: '宝付(口袋)'
        },
        {
          value: '3',
          label: '宝付(渤海)'
        },
        {
          value: '4',
          label: '支付宝'
        }

      ],
      accountResultList: [
        {
          value: '',
          label: '请选择'
        },
        {
          value: '0',
          label: '尚未对账'
        },
        {
          value: '1',
          label: '对账一致'
        },
        {
          value: '2',
          label: '对账不一致'
        }

      ],
      excuteStatusList: [
        {
          value: '',
          label: '请选择'
        },
        {
          value: '0',
          label: '尚未对账'
        },
        {
          value: '1',
          label: '数据准备完成，待对账'
        },
        {
          value: '2',
          label: '入任务池，等待批量任务执行'
        },
        {
          value: '3',
          label: '对账中'
        },
        {
          value: '4',
          label: '对账完成'
        },
        {
          value: '5',
          label: '对账处理失败'
        }
      ],
      orderColumns: [
        {
          type: 'selection',
          align: 'center',
          width: 35,
          className: 'tbake'
        },
        {
          title: '对账流水号',
          key: 'batchId',
          align: 'center',
          width: 280,
          className: 'tbake',
          render: (h, params) => {
            let vm = this
            return h('span', {
              style: {
                'color': '#20a0ff',
                'cursor': 'pointer'
              },
              on: {
                click: () => {
                  let data = { 'batchId': params.row.batchId, 'id': params.row.id }
                  vm.$router.push({ name: 'payment-company-reconcily-detail', params: { data } })// 类似post传参
                }
              }
            }, params.row.batchId)
          }
        },
        {
          title: '对账开始日期',
          key: 'dataStartTime',
          align: 'center',
          width: 90,
          className: 'tbake',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.dataStartTime))
            ])
          }
        },
        {
          title: '对账结束日期',
          key: 'dataEndTime',
          align: 'center',
          width: 90,
          className: 'tbake',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.dataEndTime))
            ])
          }
        },
        {
          title: '对账渠道',
          key: 'channelName',
          align: 'center',
          width: 90,
          className: 'tbake'
        },
        {
          title: '我方总笔数',
          key: 'ownerTotalNum',
          align: 'center',
          width: 70,
          className: 'tbake'
        },
        {
          title: '我方总金额',
          key: 'ownTotalMoney',
          align: 'center',
          width: 70,
          className: 'tbake'
        },
        {
          title: '对方总笔数',
          key: 'theyTotalMum',
          align: 'center',
          width: 70,
          className: 'tbake'
        },
        {
          title: '对方总金额',
          key: 'theyTotalMoney',
          align: 'center',
          width: 70,
          className: 'tbake'
        },
        {
          title: '征审费',
          key: 'zxTotalMoney',
          align: 'center',
          width: 70,
          className: 'tbake'
        },
        {
          title: '还款额',
          key: 'dkTotalMoney',
          align: 'center',
          width: 70,
          className: 'tbake'
        },
        {
          title: '服务费',
          key: 'fwTotalMoney',
          align: 'center',
          width: 70,
          className: 'tbake'
        },
        {
          title: '对账结果',
          key: 'recResult',
          align: 'center',
          width: 100,
          className: 'tbake',
          render: (h, params) => {
            if (params.row.recResult === '0') {
              return h('div', {
              }, '尚未对账')
            } else if (params.row.recResult === '1') {
              return h('div', {
              }, '对账一致')
            } else if (params.row.recResult === '2') {
              return h('div', {
              }, '对账不一致')
            }
          }
        },
        {
          title: '执行人',
          key: 'updatedBy',
          align: 'center',
          width: 70,
          className: 'tbake'
        },
        {
          title: '执行时间',
          key: 'updatedDate',
          align: 'center',
          width: 80,
          className: 'tbake',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.updatedDate))
            ])
          }
        },
        {
          title: '执行状态',
          key: 'recStatus',
          align: 'center',
          width: 110,
          className: 'tbake',
          render: (h, params) => {
            if (params.recStatus === '0') {
              return h('div', {
              }, '尚未对账')
            } else if (params.recStatus === '1') {
              return h('div', {
              }, '数据准备完成，待对账')
            } else if (params.recStatus === '2') {
              return h('div', {
              }, '入任务池，等待批量任务执行')
            } else if (params.recStatus === '3') {
              return h('div', {
              }, '对账中')
            } else if (params.recStatus === '4') {
              return h('div', {
              }, '对账完成')
            } else if (params.recStatus === '5') {
              return h('div', {
              }, '对账处理失败')
            }
          }

        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('Button', {
              props: {
                type: 'primary',
                size: 'small'
              },
              on: {
                click: () => {
                  vm.paymentCompanyCondition.batchId = params.row.batchId
                  this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/paymentReconciliy/service/deleteReconciliy', vm.paymentCompanyCondition).then(re => {
                    var data = re.data
                    this.$Message.warning(data.message)
                    this.listQuery()
                  }).catch(er => {

                  })
                }
              }
            }, '删除对账')
          }
        }
      ],
      orderData: [
      ],
      statisticsColumns: [
        {
          title: '我方总笔数统计',
          key: 'ownerTotalNum',
          align: 'center'
        },
        {
          title: '我方总金额统计',
          key: 'ownTotalMoney',
          align: 'center'
        },
        {
          title: '对方总笔数统计',
          key: 'theyTotalMum',
          align: 'center'
        },
        {
          title: '对方总金额统计',
          key: 'theyTotalMoney',
          align: 'center'
        },
        {
          title: '代扣费汇总',
          key: 'dkTotalMoney',
          align: 'center'
        },
        {
          title: '征审费汇总',
          key: 'zxTotalMoney',
          align: 'center'
        },
        {
          title: '咨询费汇总',
          key: 'fwTotalMoney',
          align: 'center'
        }
      ],
      statisticsData: [],
      rules: {
        withholdingBeginTime: [
          {
            validator: validateWithholdingBeginTime,
            trigger: 'blur'
          }
        ],
        withholdingEndTime: [
          {
            validator: validateWithholdingEndTime,
            trigger: 'blur'
          }
        ]
      }

    }
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },

  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
  },

  methods: {
    // 返回选择的选择器
    handleRowChange (selection) {
      this.paymentCompanyCondition.batchId = ''
      this.paymentCompanyCondition.id = ''
      if (selection.length > 1) {
        this.$Message.warn('只能选择一项')
      } else {
        this.paymentCompanyCondition.batchId = selection[0].batchId
        this.paymentCompanyCondition.id = selection[0].id
      }
    },
    pageChange: function (pageNum) {
      var vm = this
      vm.paymentCompanyCondition.pageNum = pageNum
      vm.listQuery()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.paymentCompanyCondition.pageSize = pageLength
      vm.listQuery()
    },
    listQuery () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/paymentReconciliy/service/listQuery', vm.paymentCompanyCondition).then(re => {
        var data = re.data
        // console.info(data)
        vm.orderData = data.data.list
        vm.paymentCompanyCondition.total = data.data.total
        vm.statisticsData = []
        vm.statisticsData.push(data.data.statistic)
      }).catch(er => {

      })
    },
    uploadAccount () {
      this.modal1 = true
    },
    excuteAccount () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/paymentReconciliy/service/implementReconciliyFile', vm.paymentCompanyCondition).then(re => {
        var data = re.data
        this.$Message.warning(data.message)
      }).catch(er => {

      })
    },
    ok () {
      // 下载
      document.getElementById('exportSummary').action = this.$appContext.marvels_core_financial + 'financial/loan/balanceAccount/service/downLoadTrialCostSummary'
      document.getElementById('exportSummary').submit()
    },
    cancel () {
      this.$Message.info('Clicked cancel')
    },
    uploadSuccess (response) {
      var vm = this
      vm.uploadCondition.filePath = response.response
    },
    uploadFail (error) {
      this.$Message.warning(error.message)
    }
  }
}
</script>
<style>
.tbake .ivu-table-cell{
  padding-left: 2px;
  padding-right: 2px;
}
</style>
